<template>
  <Fragment>
    <div class="head-wrap borderBottom-1px">
      <div class="title left borderBottom-2px">{{title}}</div>
      <div class="operate right"> <!---(item.id,curId)-->
        <span @click="changeTab(item.id)" v-for="(item,index) in items" :key="item.id" :class="{active : index===curId}">{{item.label}}</span>
      </div>
    </div>
    <div class="content-wrap">
      <div v-if="curId===0" class="chart-content" ref="proportionOutpatientBusinessVolume1">
        2019
      </div>
      <div v-if="curId===1" class="chart-content" ref="proportionOutpatientBusinessVolume2">
        2020
      </div>
    </div>
  </Fragment>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-liquidfill'

import { Fragment } from 'vue-fragment'
export default {
  name:'box-card-multi-analysis4-menjizhenyewulangzhanbi',
  components:{Fragment},
  props:{
    items:{
      type:Array
    },
    title:{
      type:String
    }
  },
  data(){
    return{
      curId:0,
    }
  },
  mounted(){
    this.makeData()
  },
  methods:{
    changeTab(id){
      this.curId=id
    },
    makeData(){
      // 门急症业务占比
      const option5 = {
          color: ['#00C0FF','#FC8452','#9fe6b8','#00C0FF'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show : true,
          },
          legend:[
              {
                  right:'25%',
                  align:'left',
                  itemGap: 10,
                  left: 'center',
                  bottom:'-3%',
                  textStyle: {
                      color:'#8C8C8C'
                  },
              }
          ],
          series : [
              {
                  name:'业务警种',
                  type:'pie',
                  center:['28%','40%'],
                  radius : [0, '40%'],
                  data:[
                      {value:20, name:'国宝'},
                      {value:30, name:'治安'}
                  ]
              },
              {
                  name:'业务警种',
                  type:'pie',
                  radius : [0, '40%'],
                  center:['65%','40%'],
                  data:[
                      {value:20, name:'医保医疗'},
                      {value:30, name:'医保药品'}
                  ]
              }
          ]
      };

      this.makeGraph(this.$refs.proportionOutpatientBusinessVolume1,option5)

      const option6 = {
          color: ['#00C0FF','#FC8452','#9fe6b8','#00C0FF'],
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          toolbox: {
            show : true,
          },
          legend:[
              {
                  right:'25%',
                  align:'left',
                  itemGap: 10,
                  left: 'center',
                  bottom:'-3%',
                  textStyle: {
                      color:'#8C8C8C'
                  },
              }
          ],
          series : [
              {
                  name:'业务警种',
                  type:'pie',
                  center:['28%','40%'],
                  radius : [0, '40%'],
                  data:[
                      {value:20, name:'国宝'},
                      {value:30, name:'治安'}
                  ]
              },
              {
                  name:'业务警种',
                  type:'pie',
                  radius : [0, '40%'],
                  center:['65%','40%'],
                  data:[
                      {value:20, name:'医保医疗'},
                      {value:30, name:'医保药品'}
                  ]
              }
          ]
      };

      this.makeGraph(this.$refs.proportionOutpatientBusinessVolume2,option6)
    },
    makeGraph(ref,option){
      let myChart=echarts.init(ref)
      myChart.setOption(option)
    }

  }
}
</script>
<style lang="less" scoped>
.left{float: left;}
.right{float: right;}
.borderBottom-1px{
  border-bottom: .01rem solid #7787C7 ;
}
.borderBottom-2px{
  border-bottom: .02rem solid #7787C7 ;
}
.head-wrap{
    font-size: .16rem;
    color:#ffffff;
    overflow: hidden;
    .title{
      height: .26rem;
      line-height: .262rem;
    }
    .operate{
      span{
        height: .26rem;
        line-height: .26rem;
        display: inline-block;
        cursor: pointer;
        background: url('~@/assets/images/671.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
        font-size: .11rem;
      }
      span.active{
        background: url('~@/assets/images/670.png') no-repeat center center;
        background-size: contain;
        padding: 1px .2rem;
        font-size: .11rem;
      }
    }
  }
  .content-wrap{
    width: 100%;
    height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
    // height:calc( (100vh - 1.23rem) * 4 / 10 - 0.36rem) !important;
    .chart-content{
      width: 100%;
      height:calc( (100vh - 1.23rem) / 3 - .3rem) ;
      // height:calc( (100vh - 1.23rem) * 4 / 10 - 0.36rem) !important;
      float: left;
      overflow: hidden;
    }
  }
  img{width: 100%;float: left;}
</style>